<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心 - 江心漫屿</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="css/profile.css">
</head>
<body class="bg-gradient-to-br from-green-50 to-blue-50 min-h-screen">
    <!-- 状态栏已移除 - 全面屏设计 -->

    <!-- 顶部导航 -->
    <div class="bg-white px-6 py-4 border-b border-gray-200">
        <div class="flex items-center justify-between">
            <div class="flex items-center space-x-3">
                <button class="text-gray-600 hover:text-green-600 transition-colors">
                    <i class="fas fa-arrow-left text-lg"></i>
                </button>
                <h1 class="text-xl font-bold text-gray-800">个人中心</h1>
            </div>
            <div class="flex items-center space-x-3">
                <button class="text-gray-600 hover:text-green-600 transition-colors">
                    <i class="fas fa-cog text-lg"></i>
                </button>
                <button class="text-gray-600 hover:text-green-600 transition-colors">
                    <i class="fas fa-bell text-lg"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="flex-1 px-6 py-4 space-y-4">
        <!-- 用户信息卡片 -->
        <div class="bg-white rounded-2xl p-6 shadow-sm">
            <div class="flex items-center space-x-4">
                <div class="relative">
                    <img src="https://images.unsplash.com/photo-1494790108755-2616b612b5bc?w=80&h=80&fit=crop&crop=face" alt="用户头像" class="w-16 h-16 rounded-full object-cover">
                    <div class="absolute -bottom-1 -right-1 bg-green-500 rounded-full p-1">
                        <i class="fas fa-camera text-white text-xs"></i>
                    </div>
                </div>
                <div class="flex-1">
                    <h2 class="text-xl font-bold text-gray-800">江心游客</h2>
                    <p class="text-gray-600 text-sm">江心屿探索者</p>
                    <div class="flex items-center space-x-4 mt-2">
                        <div class="text-center">
                            <div class="text-lg font-bold text-green-600">12</div>
                            <div class="text-xs text-gray-500">打卡次数</div>
                        </div>
                        <div class="text-center">
                            <div class="text-lg font-bold text-blue-600">5</div>
                            <div class="text-xs text-gray-500">获得徽章</div>
                        </div>
                        <div class="text-center">
                            <div class="text-lg font-bold text-purple-600">3</div>
                            <div class="text-xs text-gray-500">收藏商品</div>
                        </div>
                    </div>
                </div>
                <button class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-full text-sm font-medium transition-colors">
                    编辑资料
                </button>
            </div>
        </div>
        
        <!-- 会员等级 -->
        <div class="bg-gradient-to-r from-green-500 to-blue-500 rounded-2xl p-4 text-white">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-lg font-bold">江心会员</h3>
                    <p class="text-sm opacity-90">享受专属优惠和服务</p>
                </div>
                <div class="text-right">
                    <div class="text-2xl font-bold">VIP</div>
                    <div class="text-xs opacity-90">有效期至 2024.12.31</div>
                </div>
            </div>
            <div class="mt-3">
                <div class="flex justify-between text-xs mb-1">
                    <span>当前积分: 1,280</span>
                    <span>下一等级: 2,000</span>
                </div>
                <div class="bg-white/20 rounded-full h-2">
                    <div class="bg-white rounded-full h-2" style="width: 64%"></div>
                </div>
            </div>
        </div>
        
        <!-- 我的徽章 -->
        <div class="bg-white rounded-2xl p-4 shadow-sm">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-gray-800">我的徽章</h3>
                <button class="text-green-600 text-sm hover:text-green-700 transition-colors">
                    查看全部 <i class="fas fa-chevron-right ml-1"></i>
                </button>
            </div>
            <div class="grid grid-cols-5 gap-3">
                <div class="badge-item earned" data-badge="explorer">
                    <div class="badge-icon">
                        <i class="fas fa-compass text-white"></i>
                    </div>
                    <span class="text-xs text-center">探索者</span>
                </div>
                <div class="badge-item earned" data-badge="photographer">
                    <div class="badge-icon">
                        <i class="fas fa-camera text-white"></i>
                    </div>
                    <span class="text-xs text-center">摄影师</span>
                </div>
                <div class="badge-item earned" data-badge="collector">
                    <div class="badge-icon">
                        <i class="fas fa-shopping-bag text-white"></i>
                    </div>
                    <span class="text-xs text-center">收藏家</span>
                </div>
                <div class="badge-item earned" data-badge="historian">
                    <div class="badge-icon">
                        <i class="fas fa-scroll text-white"></i>
                    </div>
                    <span class="text-xs text-center">历史学者</span>
                </div>
                <div class="badge-item" data-badge="master">
                    <div class="badge-icon">
                        <i class="fas fa-crown text-gray-400"></i>
                    </div>
                    <span class="text-xs text-center text-gray-400">大师</span>
                </div>
            </div>
        </div>
        
        <!-- 功能菜单 -->
        <div class="bg-white rounded-2xl shadow-sm">
            <div class="divide-y divide-gray-100">
                <a href="#" class="menu-item">
                    <div class="flex items-center space-x-3">
                        <div class="menu-icon bg-blue-100">
                            <i class="fas fa-history text-blue-600"></i>
                        </div>
                        <span class="text-gray-800">浏览历史</span>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </a>
                <a href="#" class="menu-item">
                    <div class="flex items-center space-x-3">
                        <div class="menu-icon bg-green-100">
                            <i class="fas fa-heart text-green-600"></i>
                        </div>
                        <span class="text-gray-800">我的收藏</span>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </a>
                <a href="#" class="menu-item">
                    <div class="flex items-center space-x-3">
                        <div class="menu-icon bg-purple-100">
                            <i class="fas fa-shopping-cart text-purple-600"></i>
                        </div>
                        <span class="text-gray-800">购物车</span>
                        <span class="cart-count">2</span>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </a>
                <a href="#" class="menu-item">
                    <div class="flex items-center space-x-3">
                        <div class="menu-icon bg-yellow-100">
                            <i class="fas fa-coins text-yellow-600"></i>
                        </div>
                        <span class="text-gray-800">积分商城</span>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </a>
                <a href="#" class="menu-item">
                    <div class="flex items-center space-x-3">
                        <div class="menu-icon bg-red-100">
                            <i class="fas fa-ticket-alt text-red-600"></i>
                        </div>
                        <span class="text-gray-800">优惠券</span>
                        <span class="coupon-count">3</span>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </a>
                <a href="#" class="menu-item">
                    <div class="flex items-center space-x-3">
                        <div class="menu-icon bg-indigo-100">
                            <i class="fas fa-map-marked-alt text-indigo-600"></i>
                        </div>
                        <span class="text-gray-800">足迹地图</span>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </a>
                <a href="#" class="menu-item">
                    <div class="flex items-center space-x-3">
                        <div class="menu-icon bg-pink-100">
                            <i class="fas fa-camera text-pink-600"></i>
                        </div>
                        <span class="text-gray-800">我的相册</span>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </a>
                <a href="#" class="menu-item">
                    <div class="flex items-center space-x-3">
                        <div class="menu-icon bg-gray-100">
                            <i class="fas fa-question-circle text-gray-600"></i>
                        </div>
                        <span class="text-gray-800">帮助中心</span>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </a>
            </div>
        </div>
        
        <!-- 最近活动 -->
        <div class="bg-white rounded-2xl p-4 shadow-sm">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-gray-800">最近活动</h3>
                <button class="text-green-600 text-sm hover:text-green-700 transition-colors">
                    查看全部 <i class="fas fa-chevron-right ml-1"></i>
                </button>
            </div>
            <div class="space-y-3">
                <div class="activity-item">
                    <div class="activity-icon bg-green-100">
                        <i class="fas fa-camera text-green-600"></i>
                    </div>
                    <div class="activity-content">
                        <p class="text-sm font-medium text-gray-800">在江心寺打卡拍照</p>
                        <p class="text-xs text-gray-500">2小时前</p>
                    </div>
                    <div class="activity-points">
                        <span class="text-xs text-green-600 font-medium">+10 积分</span>
                    </div>
                </div>
                <div class="activity-item">
                    <div class="activity-icon bg-blue-100">
                        <i class="fas fa-shopping-bag text-blue-600"></i>
                    </div>
                    <div class="activity-content">
                        <p class="text-sm font-medium text-gray-800">购买了江心屿纪念徽章</p>
                        <p class="text-xs text-gray-500">昨天</p>
                    </div>
                    <div class="activity-points">
                        <span class="text-xs text-green-600 font-medium">+50 积分</span>
                    </div>
                </div>
                <div class="activity-item">
                    <div class="activity-icon bg-purple-100">
                        <i class="fas fa-trophy text-purple-600"></i>
                    </div>
                    <div class="activity-content">
                        <p class="text-sm font-medium text-gray-800">获得"历史学者"徽章</p>
                        <p class="text-xs text-gray-500">3天前</p>
                    </div>
                    <div class="activity-points">
                        <span class="text-xs text-green-600 font-medium">+100 积分</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部导航 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 px-6 py-3">
        <div class="grid grid-cols-5 gap-1">
            <div class="text-center">
                <i class="fas fa-home text-gray-400 text-xl mb-1"></i>
                <p class="text-gray-400 text-xs">首页</p>
            </div>
            <div class="text-center">
                <i class="fas fa-map text-gray-400 text-xl mb-1"></i>
                <p class="text-gray-400 text-xs">地图</p>
            </div>
            <div class="text-center">
                <i class="fas fa-camera text-gray-400 text-xl mb-1"></i>
                <p class="text-gray-400 text-xs">打卡</p>
            </div>
            <div class="text-center">
                <i class="fas fa-shopping-bag text-gray-400 text-xl mb-1"></i>
                <p class="text-gray-400 text-xs">商城</p>
            </div>
            <div class="text-center">
                <i class="fas fa-user text-green-600 text-xl mb-1"></i>
                <p class="text-green-600 text-xs">我的</p>
            </div>
        </div>
    </div>

    <script src="js/profile.js"></script>
</body>
</html>